<!-- 滚动吸附效果演示(vue) -->
<template>
	<view class="tabbar">
		<view class="tabbar-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">关注</view>
		<view class="tabbar-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">首页</view>
		<view class="tabbar-item" :class="{ active: currentTab === 2 }" @click="switchTab(2)">同城</view>
	</view>
	<view class="content">
		<view v-if="currentTab === 0">
			<!-- 关注表格内容 -->
			<span>关注</span>
		</view>
		<view v-if="currentTab === 1">
			<!-- 首页列表内容 -->
			<!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
			<z-paging ref="paging" v-model="dataList" :auto-clean-list-when-reload="false"
				:auto-scroll-to-top-when-reload="false" :refresher-status.sync="refresherStatus" @query="queryList"
				:refresher-default-text="'下拉刷新'" :refresher-pulling-text="'释放刷新'" :refresher-refreshing-text="'刷新中...'">
				<view>

					<view class="homeLayout">
						<view class="banner">
							<swiper circular autoplay indicator-dots indicator-color="rgba(255,255,255,0.5)"
								indicator-active-color="#fff" interval="1500" duration="300">
								<swiper-item>
									<image src="../../../static/img/banner/lsly.jpg" mode="aspectFill"></image>
								</swiper-item>
								<swiper-item>
									<image src="../../../static/img/banner/ylf.jpg" mode="aspectFill"></image>
								</swiper-item>
								<swiper-item>
									<image src="../../../static/img/banner/lsly2.jpg" mode="aspectFill"></image>
								</swiper-item>

							</swiper>
						</view>
					</view>
					<view class="notice">
						<view class="left">
							<uni-icons type="sound-filled" size="30" color="green"></uni-icons>
							<text class="test">公告</text>
						</view>
						<view class="center">
							<swiper vertical="" autoplay="" interval="3000" duration="300" circular="">
								<swiper-item>更新公告:xxxx版本即将上线</swiper-item>
								<swiper-item>热门内容:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</swiper-item>
							</swiper>
						</view>
						<view class="right">
							<uni-icons type="right" size="30" color="green"></uni-icons>
						</view>
					</view>

				</view>

				<view class="classify">
					<theme-item v-for="(item,index) in dataList" :key="index" @click="itemClick(item,index)"
						:imageUrl="getImageUrl(index)">
						<template #mask>详情</template>
						<template #tab>{{index}}</template>
					</theme-item>
				</view>

				<view class="loading" v-if="loading">
					<uni-load-more status="loading"></uni-load-more>
				</view>

				<view class="empty" v-if="!loading && dataList.length === 0">
					<text>暂无数据</text>
				</view>

			</z-paging>
		</view>
		<view v-if="currentTab === 2">
			<!-- 同城空白内容 -->
			<span>首页</span>
		</view>
	</view>
</template>

<script>
	import api from '@/api'

	const images = [
		'/static/img/cover/ddly.jpg',
		'/static/img/cover/dlk.jpg',
		'/static/img/cover/gz.jpg',
		'/static/img/cover/lh.jpg',
		'/static/img/cover/lsly111.jpg',
		'/static/img/cover/pm.jpg',
		'/static/img/cover/sn.jpg',
		'/static/img/cover/yl.jpg',
		'/static/img/cover/yl2.jpg',
		'/static/img/cover/hh.jpeg',
	];
	export default {
		data() {
			return {
				currentTab: 1,
				refresherStatus: 0,
				dataList: [],
				loading: false // 添加loading状态
			}
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
				// 这里可以添加切换标签页时的逻辑
			},
			tabChange(index) {
				this.tabIndex = index;
				// 当切换tab时请调用组件的reload方法，请勿直接调用：queryList方法！！
				this.$refs.paging.reload();
			},
			itemClick(item, index) {
				console.log('点击了', item.title);
				var intG = index % 10;
				var url = images[intG];
				//url: `/pages/newPage/newPage?imageUrl=${encodeURIComponent(imageUrl.value)}`
				uni.navigateTo({
					url: `/pages/PageDetail/PageDetail?imageUrl=${url}`
				});
			},
			getImageUrl(index) {
				var intG = index % 10;
				var url = images[intG]
				return url;
			},
			// 添加查询列表方法
			queryList(pageNo, pageSize) {
				this.loading = true
				api.home.getNewsList({
					page: pageNo,
					num: pageSize
				}).then(res => {
					this.$refs.paging.complete(res.data)
				}).catch(() => {
					this.$refs.paging.complete(false)
				}).finally(() => {
					this.loading = false
				})
			}
		}
	}
</script>

<style>
	.content {
		margin-top: 120rpx;
		padding-top: 20rpx;
		overflow: hidden;
	}

	.banner-view {
		background-color: #007AFF;
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.item {

		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}

	.item-title {
		width: 550rpx;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
		width: 100rpx;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}

	.classify {
		padding: 30rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15rpx;
	}
</style>

<style lang="scss" scoped>
	@import "../../../common/style/common-style.scss";

	.homeLayout {
		.banner {
			width: 750rpx;
			padding: 30rpx 0;

			swiper {
				width: 750rpx;
				height: 340rpx;

				swiper-item {
					width: 100%;
					height: 100%;
					padding: 0 30rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
			}
		}
	}

	.notice {
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f9f9f9;
		margin: 0 auto;
		border-radius: 80rpx;
		display: flex;

		.left {
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.text {
				color: #28b389;
				font-size: 28rpx;
				font-weight: 600;
			}
		}

		.center {
			flex: 1;

			swiper {
				height: 100%;

				&-item {
					height: 100%;
					font-size: 30rpx;
					color: #666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.right {
			width: 70rpx;
			margin: 0 auto;
			border-radius: 80rpx;
			display: flex;
		}

	}

	.theme {
		padding-top: 50rpx;

		.more {
			font-size: 32rpx;
			color: #888;
		}
	}

	.layout {
		.item {
			padding: 60rpx 30rpx;
			border-top: 1rpx solid #eee;
		}
	}
</style>

<style>
	.tabbar {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
	}

	.tabbar-item {
		font-size: 36rpx;
		color: #666;
		padding: 20rpx 30rpx;
		transition: all 0.3s ease;
		border-radius: 40rpx;
	}

	.tabbar-item.active {
		color: #fff;
		background-color: #007AFF;
		border-bottom: none;
		box-shadow: 0 4rpx 8rpx rgba(0, 122, 255, 0.3);
	}
</style>